<!DOCTYPE html>
<html lang="en" style="background:#ddd">

<head>
    <meta charset="UTF-8">
    <title>svg</title>
</head>

<body>
    <svg style="display:block;background:#fff;margin:30px auto;" height="400"  width="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(0,400) scale(1,-1)">
        <g>
            <line x1="50" y1="40" x2="50" y2="90" stroke-width="0.5" stroke="red"></line>
            <line x1="50" y1="60" x2="50" y2="80" stroke-width="5" stroke="red"></line>
        </g>
        <g>
            <line x1="57" y1="25" x2="57" y2="70" stroke-width="0.5" stroke="green"></line>
            <line x1="57" y1="60" x2="57" y2="40" stroke-width="5" stroke="green"></line>
        </g>
        <g>
            <line x1="64" y1="40" x2="64" y2="90" stroke-width="0.5" stroke="red"></line>
            <line x1="64" y1="60" x2="64" y2="80" stroke-width="5" stroke="red"></line>
        </g>
        <g>
            <line x1="71" y1="25" x2="71" y2="70" stroke-width="0.5" stroke="green"></line>
            <line x1="71" y1="60" x2="71" y2="40" stroke-width="5" stroke="green"></line>
        </g>
        <g>
            <polyline points="0 0,50 50,80 60,90 80" stroke="blue" fill="none"></polyline>
        </g>
        <!-- <rect x="50" y="50" width="5" height="50" fill="#fff" stroke="#000"></rect> -->
    </g>

    </svg>
</body>

</html>
